<template>
  <!--  车辆配送-->
  <div class="carDeliver">
    <el-row class="row1">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a>运输配送</a></el-breadcrumb-item>
        <el-breadcrumb-item>车辆配送</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-form style="width: 100%">
        <el-row>
          <el-col :span="5">
            <el-form-item label="状态">
              <el-select placeholder="全部" style="width: 200px" v-model="data.select.statusBack">
                <el-option v-for="status in data.select.status" :label="status.descs" :value="status.descs"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="配送员">
              <el-select placeholder="全部" style="width: 200px" v-model="data.select.driver">
                <el-option v-for="driver in data.select.drivers" :label="driver.driverName"
                           :value="driver.driverName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="配送车辆">
              <el-select placeholder="全部" style="width: 200px" v-model="data.select.number">
                <el-option v-for="vehicle in data.select.vehicles" :label="vehicle.number"
                           :value="vehicle.number"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="订单编号">
              <el-input style="width: 200px" v-model="data.select.OrderId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button class="btn" type="success" @click="selectBtn"><el-icon><Search /></el-icon>&nbsp;&nbsp;搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="10">
        <!--        carList-->
        <div class="carBox">
          <div class="carTitle">
            <el-text style="font-size: 25px" tag="b">
              车辆配送信息
            </el-text>
          </div>
          <el-table :data="data.list" class="carTable">
            <el-table-column prop="orderId" label="订单编号" width="80px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="number" label="车牌号" width="100px"></el-table-column>
            <el-table-column prop="driverName" label="司机姓名" width="80px"></el-table-column>
            <el-table-column prop="deliverTime" label="最后更新时间" width="150px"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="status" label="配送状态" width="80px"></el-table-column>
          </el-table>
          <el-row style="width: 100%; display: flex;justify-content: right">
            <el-pagination
                style="margin-right: 10px"
                v-model:current-page="data.carPage.currentPage"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :page-size="5"
                :total="data.carPage.total"
                class="carPage"
            />
          </el-row>
        </div>
      </el-col>
      <el-col :span="14">
        <!--clientList-->
        <div class="clientBox">
          <div class="clientBox2">
            <el-text tag="b" style="font-size: 20px">当前时间:{{ data.date }}</el-text>
            <el-link class="trace" @click="btnTraceClick"><b>查看车辆行驶轨迹</b></el-link>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="配送单" name="first">
                <el-table :data="data.clientList">
                  <el-table-column prop="orderId" label="订单编号" width="80px" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="client" label="客户名称" width="140px" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="address" label="收货地址" width="140px"
                                   show-overflow-tooltip></el-table-column>
                  <el-table-column prop="consignee" label="联系人" width="110px"></el-table-column>
                  <el-table-column prop="consigneePhone" label="联系电话" width="130px"></el-table-column>
                  <!--                <el-table-column prop="quantity" label="数量" width="70px"></el-table-column>-->
                  <el-table-column prop="status" label="配送状态" width="80px"></el-table-column>
                </el-table>

                <el-row style="width: 100%; display: flex;justify-content: right">
                  <el-pagination
                      v-model:current-page="data.clientPage.currentPage"
                      @current-change="handleCurrentChangeClient"
                      layout="prev, pager, next"
                      :page-size="5"
                      :total="data.clientPage.total"
                      class="clientPage"
                  />
                </el-row>

              </el-tab-pane>


              <el-tab-pane label="销售退货单" name="second">
                <el-table :data="data.returnList">
                  <el-table-column prop="orderId" label="订单编号" width="80px" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="client" label="客户名称" width="140px" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="address" label="收货地址" width="140px"
                                   show-overflow-tooltip></el-table-column>
                  <el-table-column prop="consignee" label="联系人" width="110px"></el-table-column>
                  <el-table-column prop="consigneePhone" label="联系电话" width="150px"></el-table-column>
                  <el-table-column prop="status" label="配送状态" width="80px"></el-table-column>
                </el-table>

                <el-pagination
                    v-model:current-page="data.returnPage.currentPage"
                    @current-change="handleCurrentChangeClient"
                    layout="prev, pager, next"
                    :page-size="5"
                    :total="data.returnPage.total"
                    class="clientPage"
                />
              </el-tab-pane>
            </el-tabs>
          </div>

        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, onMounted} from "vue";
import axios from "axios";
import type {TabsPaneContext} from 'element-plus'
import moment from "moment";
import router from "@/router";
import {ElMessage} from "element-plus";
//标签页
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}


const data = reactive({
  list: [],
  clientList: [],
  returnList: [],
  select: {
    status: [],
    statusBack: "",
    drivers: [],
    driver: "",
    vehicles: [],
    number: "",
    OrderId: ""
  },
  date: moment(new Date()).format(' YYYY-MM-DD HH:mm'),

  carPage: {
    currentPage: 1,
    total: ""
  },
  clientPage: {
    currentPage: 1,
    total: ""
  },
  returnPage: {
    currentPage: 1,
    total: ""
  }
})

onMounted(() => {
  initList();
  initStatus();
  initDriver();
  initVehicle();
})
//跳转定位页面
let btnTraceClick = () => {
  router.push("/position");
}

//初始化表格
let initList = () => {
  //初始化carList
  handleCurrentChange();
  //初始化clientList
  handleCurrentChangeClient();
  handleCurrentChangeReturn();

}
//退货换页
const handleCurrentChangeReturn = () => {
  axios({
    url: "http://localhost:8080/clientDeliver/selectReturn",
    method: "get",
    params: {
      currentPage: data.returnPage.currentPage
    }
  }).then((res) => {
    data.returnList = res.data.data;
    data.returnPage.total = res.data.total;
  })
}
//car换页
const handleCurrentChange = () => {
  if (data.select != null) {
    selectBtn();
  } else {
    axios({
      url: "http://localhost:8080/deliver/selectAll",
      method: "get",
      params: {
        currentPage: data.carPage.currentPage
      }
    }).then((res) => {
      data.list = res.data.data;
      data.carPage.total = res.data.total;
    })
  }

}
//client换页
const handleCurrentChangeClient = () => {
  axios({
    url: "http://localhost:8080/clientDeliver/selectAll",
    method: "get",
    params: {
      currentPage: data.clientPage.currentPage
    }
  }).then((res) => {
    data.clientList = res.data.data;
    data.clientPage.total = res.data.total;
  })
}


let initStatus = () => {
  axios({
    url: "http://localhost:8080/dict/selectStatus",
    method: "get",
    params: ""
  }).then((res) => {

    data.select.status = res.data.data;
    console.log(data.select.status);
  })
}
//搜索
let selectBtn = () => {
  axios({
    url: "http://localhost:8080/deliver/myQuery",
    method: "get",
    params: {
      currentPage: data.carPage.currentPage,
      size: 5,
      status: data.select.statusBack,
      orderId: data.select.OrderId,
      driverName: data.select.driver,
      number: data.select.number
    }
  }).then((res) => {
    data.carPage.total = res.data.total;
    data.list = res.data.data;
  })
}
let initDriver = () => {
  axios({
    url: "http://localhost:8080/driver/selectAll",
    method: "get",
    params: ""
  }).then((res) => {

    data.select.drivers = res.data.data;

  })
}
let initVehicle = () => {
  axios({
    url: "http://localhost:8080/vehicle/selectAll",
    method: "get",
    params: ""
  }).then((res) => {

    data.select.vehicles = res.data.data;

  })
}
</script>

<style scoped>
.el-breadcrumb {
  font-size: 17px;
  margin-bottom: 10px;
}

.carDeliver {
  margin: 15px;
  height: 650px;

}

.btn {
  width: 200px;
  margin-left: 50px;
  border-radius: 10px;
}

/*车辆*/
.carTable {
  margin-top: 20px;
  margin-left: 10px;
  width: 490px;
}

.carTitle {
  margin-top: 40px;
  margin-left: 30px;
}

.carPage {
  margin-top: 10px;
  margin-left: 18px;
}

.carBox {
  margin-top: 10px;
  border: 1px #3de1cf solid;
  width: 100%;
  height: 450px;
  border-radius: 50px;
  background: #ecf5ff;
}

/*客户*/
.clientBox2 {
  width: 690px;
  margin-left: 10px;
  margin-top: 50px;
}

.clientPage {
  margin-top: 10px;

}

.clientBox {
  margin-top: 10px;
  border: 1px #3de1cf solid;
  border-radius: 50px;
  background: #ecf5ff;
  width: 100%;
  height: 450px;
  margin-left: 10px;
}


.demo-tabs > .el-tabs__content {

  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.trace {
  font-size: 15px;
  color: #cca610;
  margin-left: 250px;
}

.row1 {
  margin-top: 15px;
  margin-bottom: 10px;
}
</style>